<template>
    <el-card>
        <el-breadcrumb class="bread">
            <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index" :to="{ path: item.path }">
                {{ item.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </el-card>
    <el-card>
        <el-table :data="boxList" stripe style="width: 100%">
            <el-table-column prop="device_name" label="控制设备名称" />
            <el-table-column prop="device_addr" label="控制设备地址" />
            <el-table-column label="设备状态">
                <template #default="scope">
                    {{ scope.row.device_status === 1 ? "在线" : "离线" }}
                </template>
            </el-table-column>
            <el-table-column prop="update_time" label="设备更新时间" />
            <el-table-column align="center">
                <template #header>
                    <el-input v-model="deviceTitle" size="small" placeholder="支持根据设备名称模糊搜索" @input="searchData" style="width: 160px; margin-right: 10px; "/>
                    <el-button size="small" style="width: 80px; text-align: center;"
                        @click="toGetAll">{{ allDevice ? '查看全部设备' : '查看收藏设备' }}</el-button>
                </template>
                <template #default="scope">

                    <el-button plain size="small" type="primary"
                        @click="toVariant(scope.row.id, scope.row.device_name)">详情</el-button>
                    <el-button plain size="small" type="primary"
                        @click="toEchart(scope.row.id, scope.row.device_name)">图表</el-button>
                    <el-button plain type="primary" @click="dialogFormVisible = true">
                        设定阈值
                    </el-button>
                    <el-button size="small" :style="{ color: scope.row.is_get_value ? 'black' : 'red', border: '0px', backgroundColor: '#fafafa' }"
                        @click="toGetValue(scope.row)">
                        <el-icon><Star /></el-icon>
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <!-- 弹出窗 -->
        <el-dialog v-model="dialogFormVisible" title="设定阈值" width="500">
            <el-form :model="form">
            <el-form-item label="请选择阈值">
                <div class="flex gap-4 mb-4 items-center">
                    <el-select
                    v-model="value"
                    size="small"
                    style="width: 80px; margin-right: 30px;"
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    </el-select>
                    <el-input
                    v-model="form.name"
                    style="width: 100px"
                    size="small"
                    />
                    <el-input
                    v-if="value === 3"
                    v-model="form.logical"
                    style="width: 100px; margin-left: 30px;"
                    size="small"
                    />
                </div>
            </el-form-item>
            <el-form-item label="预警人或群">
                <el-select v-model="employee" placeholder="请选择预警人或群">
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="请选择时间">
                    <el-date-picker
                        v-model="date_range"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                    />
            </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.page_size"
            layout="->,total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { box, collection, wechart } from '../api/index';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { echartTitleStore } from '../stores/index';

const echartTitle = echartTitleStore();
const route = useRoute();
const router = useRouter();
const boxList = ref([]);
const allDevice = ref(false);
let total = ref(0);
const deviceTitle = ref();
const crumbs = ref([
    {
        "path": "/projects",
        "title": "项目列表"
    },
    {
        "path": "/projects/box",
        "title": "项目详情"
    }
])
const dialogFormVisible = ref(false);
const date_range = ref();
const thresholdForm = reactive({
  name: "",
  logical: "",
  date_range: ""
});
const value = ref('');
const options = ref([
  {
    value: 1,
    label: '大于',
  },
  {
    value: 2,
    label: '小于',
  },
  {
    value: 3,
    label: '介于',
  }
]);
const employee = ref([]);
const searchForm = reactive({
    boxId: route.query.boxId,
    isGetValue: 1,
    page: 1,
    page_size: 15
});
const message = ref();
const getBoxList = async () => {
    const res = await box(searchForm);
    if (res.status === 2000) {
        boxList.value = res.data;
        total.value = res.total;
    } else {
        ElMessage.error(res.message);
    }
}

// 执行
getBoxList();

const searchData = (value) => {
    searchForm.title = value;
    getBoxList();
}

// 跳页码
const handleCurrentChange = (page) => {
    searchForm.page = page;
    getBoxList();
}

// 详情数据
const toVariant = (variantId, device_name) =>{
    window.sessionStorage.setItem("variantId", variantId);
    echartTitle.changeTitle(device_name);
    router.push({ path: '/projects/box/variant', query: { id: variantId} })
}
// 收藏或取消收藏
const toGetValue = async(row) => {
    let data = {
        variantId: row.id,
        isGetValue: row.is_get_value === 0 ? 1 : 0
    }
    const res = await collection(data);
    if (res.status === 2000) {
        
        if (row.is_get_value === 0){
            message.value = "取消收藏"
        }else{
            message.value = "收藏成功"
        }
        console.log(message.value)
        ElMessage.success(message.value);
        getBoxList();
    } else {
        ElMessage.warning('警告信息');
    }
}
// 获取微信信息
const wechartInfo = async() => {
    const res = await chart();
    if (res.status === 2000){}
}
// 查看全部或只查看收藏
const toGetAll = () => {
    allDevice.value = !allDevice.value;
    searchForm.page = 1;
    searchForm.isGetValue = allDevice.value ? 0 : 1;
    getBoxList();
}

const toEchart = (variantId, device_name) =>{
    window.sessionStorage.setItem("variantId", variantId);
    echartTitle.changeTitle(device_name);
    router.push({ path: '/projects/box/chart', query: { id: variantId, "boxId": route.query.boxId } })
}
</script>
<style></style>
